<template>

  <n-form
    :model="formData"
    :rules="formRules"
    ref="formInstance"
    label-placement="left"
    label-width="80px">
    <n-grid x-gap="12" :cols="1">
      <n-gi responsive="self">
        <n-form-item label="接口名称" path="resourceName">
          <n-input v-model:value="formData.resourceName" placeholder="请输入接口名称" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="接口编码" path="resourceCode">
          <n-input v-model:value="formData.resourceCode" placeholder="请输入接口编码" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="接口地址" path="resourceUrl">
          <n-input v-model:value="formData.resourceUrl" placeholder="请输入接口地址" />
        </n-form-item>
      </n-gi>

      <n-gi>
        <n-form-item label="状态">
          <n-radio-group v-model:value="formData.enabled">
            <n-space>
              <n-radio :key="it.value" v-for="it in enabledOptions" :value="it.value"
                       :label="it.label" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="匿名访问">
          <n-radio-group v-model:value="formData.anon">
            <n-space>
              <n-radio :key="it.value" v-for="it in anonTextOptions" :value="it.value"
                       :label="it.label" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi :span="2">
        <n-form-item label="接口描述" path="resourceDescription">
          <n-input type="textarea" v-model:value="formData.resourceDescription"
                   placeholder="请输入接口描述" />
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>
<script lang="ts">
import { onMounted, ref } from "vue";
import { enabledOptions, formRules,anonTextOptions} from "./Service";
import httpApi from "../httpApi";
import { FormInst } from "naive-ui";
import { checkFormData } from "@/utils/formUtil";
import { IconSelectService } from "@/components/IconSelect/index";
import SlashAppContext from "@/context/SlashAppContext";

export default {
  name: "SysResourceMenuUpdate",
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    readMode: {
      type: [String],
      default: "read"
    }
  },
  setup: function(props) {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      resourceAppCode: SlashAppContext.getRequest().appCode,
      fkParentId: 0,
      resourceType: "api",
      anon:0
    });
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectSysTbResourceById(props.id);
        formData.value = msg.data;
      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      return httpApi.doSaveSysTbResource(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      return httpApi.doUpdateSysTbResource(formData.value);
    };
    const doSelectIconModal = async () => {
      const iconClass = await IconSelectService.doSelectIconModal();
      formData.value.iconDefault = iconClass;
    };
    onMounted(() => {
      init();
    });
    return {
      anonTextOptions,
      doSelectIconModal,
      enabledOptions,
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate
    };
  }
};
</script>

<style lang="less" scoped></style>
